<template>
	<div class="message-area-container">
		<data-form v-on="$listeners"></data-form>
		<h3>
			{{ title }}
			<span>({{ subTitle }})</span>
		</h3>
		<data-list :list="list"></data-list>
		<!-- 这个loading显示在 -->
		<div class="loading" v-loading="isListLoading"></div>
	</div>
</template>

<script>
import DataList from './DataList'
import DataForm from './DataForm'
export default {
	name: 'MessageArea',
	components: { DataForm, DataList },
	props: {
		title: { type: String, default: '评论' },
		subTitle: { type: String, default: '50' },
		list: { type: Array, default: () => [] },
		isListLoading: { type: Boolean, default: false },
	},
}
</script>

<style lang="less" scoped>
.message-area-container {
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	box-sizing: border-box;
	.data-list-container {
		margin: 20px 0;
	}
	h3 > span {
		font-size: 1rem;
		color: #999;
	}
}
</style>
